<template>
  <view class="wan-nian-li-wrapper" v-if="dataInfo.ganzhi">

    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />

    <view class="top">
      <view class="top1">
        <view class="item">{{dataInfo.ganzhi.yeargan}}{{dataInfo.ganzhi.yearzhi}}年</view>
        <view class="item">{{dataInfo.ganzhi.monthgan}}{{dataInfo.ganzhi.monthzhi}}月</view>
        <view class="item">{{dataInfo.ganzhi.daygan}}{{dataInfo.ganzhi.dayzhi}}日</view>
        <view class="item">{{dataInfo.ganzhi.timegan}}{{dataInfo.ganzhi.timezhi}}时</view>
      </view>

      <view class="top2">
        <view class="top2-item">
          <tui-icon name="arrowleft" @click="handerClick(-1)"></tui-icon>
        </view>
        <view class="top2-center">
          <view class="center-date">{{dataInfo.yinli}}</view>
          <!-- <view class="center-text">{{dataInfo.yinli}}</view> -->

          <!-- <view class="center-date">五月十五</view> -->
        </view>
        <view class="top2-item">
          <tui-icon name="arrowright" @click="handerClick(1)"></tui-icon>
        </view>
      </view>

      <view class="top3">
        <view class="item">{{dataInfo.yangli}}</view>
        <view class="item">{{dataInfo.xingqi}}</view>
        <view class="item">{{dataInfo.jieqi=="无"?'无节气':dataInfo.jieqi}}</view>
      </view>
    </view>
    <view class="center">
      <view class="center-top">
        <view class="left">智能择日</view>
        <view class="right">{{dataInfo.chongsha}}</view>
      </view>
      <view class="center-bottom">
        <view class="left">
          <view class="left-1 left-2">
            <view class="text">宜</view>
            <view class="text-item">{{dataInfo.yi}}</view>
          </view>

          <view class="left-1">
            <view class="text text-2">忌</view>
            <view class="text-item">{{dataInfo.ji}}</view>
          </view>
        </view>
        <view class="right" @click="toZejiri()">
          <image
            class="right-img"
            src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/162c7cd0fa064beeba0cb2e85f947a18.png"
            mode="scaleToFill"
          />
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="bottom-1">
        <view class="left">吉时</view>
        <view class="right">
          <view
            class="right-item"
            :class="currentActived(ls.timeRegion)?'right-item-actived':''"
            v-for="(ls,index) in dataInfo.detailInfo"
            :key="index"
          >{{ls.timeGanzhi}} {{ls.timeJixiong}}</view>
        </view>
      </view>

      <view class="bottom-1">
        <view class="left">吉方</view>
        <view class="right">
          <tui-row justify="center">
            <tui-col :span="24">
              <view class="item-col">
                贵神方位
                <text class="text">{{dataInfo.guishenfangwei}}</text>
              </view>
            </tui-col>
            <tui-col :span="8">
              <view class="item-col">
                财神方位
                <text class="text">{{dataInfo.caishenfangwei}}</text>
              </view>
            </tui-col>
            <tui-col :span="8">
              <view class="item-col">
                喜神方位
                <text class="text">{{dataInfo.xishenfangwei}}</text>
              </view>
            </tui-col>
            <tui-col :span="8">
              <view class="item-col">
                福神方位
                <text class="text">{{dataInfo.fushenfangwei}}</text>
              </view>
            </tui-col>
          </tui-row>
        </view>
      </view>
    </view>

    <view class="bottom-last">
      <tui-row justify="center" :gutter="24">
        <tui-col :span="8">
          <view class="bottom-last-item">
            <view class="title">五行</view>
            <view class="content">{{dataInfo.wuxing}}</view>
          </view>
        </tui-col>

        <tui-col :span="8">
          <view class="bottom-last-item">
            <view class="title">值神</view>
            <view class="content">{{dataInfo.tianshen}}</view>
          </view>
        </tui-col>

        <tui-col :span="8">
          <view class="bottom-last-item">
            <view class="title">吉神宜趋</view>
            <view class="content">{{dataInfo.jishen}}</view>
          </view>
        </tui-col>

        <tui-col :span="8">
          <view class="bottom-last-item">
            <view class="title">今日胎神</view>
            <view class="content">{{dataInfo.jinritaishen}}</view>
          </view>
        </tui-col>

        <tui-col :span="8">
          <view class="bottom-last-item">
            <view class="title">凶神宜忌</view>
            <view class="content">{{dataInfo.xiongshen}}</view>
          </view>
        </tui-col>

        <tui-col :span="8">
          <view class="bottom-last-item">
            <view class="title">建除十二神</view>
            <view class="content">{{dataInfo.zhixing}}日</view>
          </view>
        </tui-col>

        <tui-col :span="8">
          <view class="bottom-last-item">
            <view class="title">本月胎神</view>
            <view class="content">{{dataInfo.benyuetaishen}}</view>
          </view>
        </tui-col>

        <tui-col :span="8">
          <view class="bottom-last-item">
            <view class="title">二十八星宿</view>
            <view class="content">{{dataInfo.xingxiu}}</view>
          </view>
        </tui-col>

        <tui-col :span="24">
          <view class="bottom-last-item">
            <view class="title">彭祖百忌</view>
            <view class="content">{{dataInfo.baiji}}</view>
          </view>
        </tui-col>

        <tui-col :span="6">
          <view class="bottom-last-item">
            <view class="title">六曜</view>
            <view class="content">{{dataInfo.liuyao}}</view>
          </view>
        </tui-col>
        <tui-col :span="6">
          <view class="bottom-last-item">
            <view class="title">七政</view>
            <view class="content">{{dataInfo.qizheng}}</view>
          </view>
        </tui-col>
        <tui-col :span="6">
          <view class="bottom-last-item">
            <view class="title">物候</view>
            <view class="content">{{dataInfo.wuhou}}</view>
          </view>
        </tui-col>
        <tui-col :span="6">
          <view class="bottom-last-item">
            <view class="title">月相</view>
            <view class="content">{{dataInfo.yuexiang}}</view>
          </view>
        </tui-col>

        <tui-col :span="24">
          <view class="bottom-last-item">
            <view class="title">歌诀</view>
            <view class="content">{{dataInfo.xingxiuge}}</view>
          </view>
        </tui-col>
      </tui-row>
    </view>
  </view>
</template>

<script>
import { getNowFormatDate } from "@/utils/common.js";

import { yfgLaohuangliApi } from "@/apis/qiuqian";
export default {
  data() {
    return {
      now: 0, //当天
      dataInfo: {}
    };
  },
  mounted() {
    this.initData();
  },
  onLoad(opt) {
    this.initData();


  },
  methods: {
    async initData() {
      let title_laohuangli = getNowFormatDate(this.now);
      let { code, data } = await yfgLaohuangliApi({
        title_laohuangli: title_laohuangli
      });
      if (code == 1) {
        this.dataInfo = data;

      }
      console.log(data,'data');

    },

    handerClick(flag) {
      this.now = this.now + flag;
      this.initData();
    },
    currentActived(time) {
      let a = time.split("~");
      let arr = [];
      a.forEach(ls => {
        let aa2 = ls.split(":");
        arr.push(parseInt(aa2[0]));
      });
      if (arr.includes(new Date().getHours())) {
        return true;
      }
      return false;
    },
    toZejiri() {
      uni.navigateTo({
        url: "/pqgeInfo/zejiri/zhejiri"
      });
    }
  }
};
</script>

<style lang="scss">
.wan-nian-li-wrapper {
  flex-grow: 1;
  padding: 24px 12px 150rpx;
  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  font-size: 12px;
  position: relative;

  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    // opacity: 0.5;
  }
  .top {
    position: relative;
    z-index: 10;
    .top1 {
      display: flex;
      align-items: center;
      justify-content: center;
      .item {
        font-weight: 500;
        font-size: 15px;
        color: #333;
        margin-right: 4px;
      }
    }
    .top2 {
      margin: 20px 0;
      display: flex;
      align-items: center;
      .top2-center {
        flex-grow: 1;
        display: flex;
        align-items: center;
        .center-text {
          margin-left: 30px;
        }
        .center-date {
          margin-left: 30px;
          font-size: 18px;
          font-weight: 600;
          color: #c09351;
        }
      }
    }

    .top3 {
      display: flex;
      align-items: center;
      justify-content: center;
      .item {
        font-weight: 500;
        font-size: 12px;
        margin-right: 4px;
      }
    }
  }
  .center {
    margin-top: 20px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    z-index: 10;
    .center-top {
      color: #fff;
      background: #c09351;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 20px;
      .right {
        color: #fff;
      }
    }
    .center-bottom {
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        .left-1 {
          display: flex;
          align-items: center;
          &.left-2 {
            margin-bottom: 10px;
          }

          .text {
            flex: 0 0 22px;
            height: 22px;
            text-align: center;
            line-height: 22px;
            border-radius: 50%;
            background: #1bab4d;
            font-size: 12px;
            color: #fff;
            margin-right: 10px;
            &.text-2 {
              background: #d11a2d;
            }
          }
          .text-item {
            flex-grow: 1;
            display: flex;
            flex-wrap: wrap;
            //overflow: hidden;
            //text-overflow: ellipsis;
            //-webkit-line-clamp: 3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
      .right {
        flex: 0 0 60px;
        .right-img {
          display: inline-block;
          margin-left: 10px;
          width: 50px;
          height: 50px;
        }
      }
    }
  }

  .bottom {
    margin-top: 20px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;

    .bottom-1 {
      display: flex;
      align-items: center;
      padding: 10px;
      .left {
        flex: 0 0 36px;
        writing-mode: vertical-rl;
        font-size: 16px;
        color: #d11a2d;
        display: flex;
        align-items: center;
      }
      .right {
        flex-grow: 1;
        display: flex;
        align-items: center;
        .right-item {
          flex: 1;
          writing-mode: vertical-rl;
          &.right-item-actived {
            color: #d11a2d;
            font-weight: 600;
          }
        }

        .item-col {
          color: #c09351;
          text-align: center;
        }
        .text {
          margin-left: 6px;
          color: #333;
          font-size: 14px;
        }
      }
    }
  }

  .bottom-last {
    margin-top: 20px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    padding: 10px 10px;

    .bottom-last-item {
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 10px;
      .title {
        color: #c09351;
      }
    }
  }
}
</style>
